<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="ct">
        <h1 class="detail-score">充值记录</h1>
        <div class="bg-hr"></div>

        <div class="order">

          <NoContent :show="orderList.length == 0"/>

          <OrderDetail v-for="(order, index) in orderList"
                       :key="order.id"
                       :order="order"  @cancel-order-success="queryOrders"/>
        </div>

        <VanPagination v-model="page" :totalItems="total" :itemsPerPage="pageSize" :showPageSize="5"
                       :forceEllipses="true" @click-page="queryOrders"/>
      </section>

    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import Official from '../components/message/Official.vue'
import Notify from '../components/message/Notify.vue'
import BlockList from '../components/message/BlockList.vue'
import OrderDetail from '../components/OrderDetail.vue'
import VanPagination from '../components/VanPagination.vue' ;
import NoContent from "../components/NoContent.vue";

export default {
  components: {
    HeaderNav,
    Footer,
    Official,
    Notify,
    BlockList,
    VanPagination,
    OrderDetail ,
    NoContent
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      orderList: []
    }
  },
  created() {
     this.queryOrders() ;
  },
  methods: {
     queryOrders() {
       this.$api.queryOrderList(this.page, this.pageSize).then(ret=> {
         if (ret.status) {
           this.orderList = ret.data.list ;
           this.total = ret.data.total ;
         }
       }) ;
     }
  }

}
</script>

<style scoped>
.order {
  position: relative;
  margin-top: 60px;
}

</style>